<template>
    <div class="video_canvas">
        <video id="videoTagId"></video>
        <div class="serve_content">
            <p v-for="(v,i) in serveContent" :key="i">
                {{ v }}
            </p>
        </div>
    </div>
</template>
<script>
import VideoConverter from 'h264-converter';
export default{
    name:"h264Coverter",
    data(){
        return{
            wsUrl:'',
            serveContent:[],
            converter:{},
        }
    },
    mounted(){
        this.wsUrl = window.config.wsUrl;
        const element = document.getElementById('videoTagId');
        this.converter = new VideoConverter(element,30,6);
        this.connectWebSocket();
    },
    destroyed() {
        this.webSocket.close();
    },
    methods:{
        init(){

        },
        connectWebSocket() {
            this.webSocket = new WebSocket(this.wsUrl);
            this.webSocket.binaryType = 'arraybuffer';
            
            this.webSocket.onopen = () => {
            console.log('WebSocket connected');
            };
    
            this.webSocket.onmessage = (event) => {
                console.log(event)
                this.serveContent.push(event.data);
                this.converter.appendRawData(event.data);
                
            if (event.data instanceof ArrayBuffer) {
                
            }
            else{
                console.log('gettt')
            }
            };
    
            this.webSocket.onerror = (error) => {
            console.error('WebSocket error:', error);
            };
    
            this.webSocket.onclose = () => {
            console.log('WebSocket disconnected');
            };
        },
    }
}
</script>
<style>
#videoTagId{
    width: 100%;
    height: 300px;
    object-fit: contain;
    background-color: #000;
}
.serve_content{
    width: 100%;
    height: 200px;
    overflow-y: auto;
}
.serve_content p{
    line-height: 20px;
    font-size: 20px;
}
</style>